<template>
	<view>
		<view class="form_class">
			<view class="input_class"><uv-input border="bottom" v-model="rx_info.name" placeholder="请输入"><template v-slot:prefix>
				<uv-text text="患者名称" margin="0 3px 0 0" type="tips"></uv-text></template>
			</uv-input></view>
			
			<view class="input_class_title">
				<view class="input_class_title_left" style="width: 80%;"><uv-input type="number" border="bottom" v-model="rx_info.age" placeholder="请输入"><template v-slot:prefix>
					<uv-text text="患者年龄" margin="0 3px 0 0" type="tips"></uv-text></template>
				</uv-input></view>
				<view class="input_class_title_right"><uv-text text="周岁" margin="0 3px 0 0" type="tips" customStyle="margin-top: 20rpx;"></uv-text></view>
			</view>
			
			<uv-popup ref="popup" round="20">
				<uv-row>
					<uv-col span="6">
						<view class="sex_popup">
							<uv-image src="/static/sex_1.png" width="128px" height="128px" shape="circle" @click="sexClick('男')"></uv-image>
						</view>
					</uv-col>
					<uv-col span="6">
						<view class="sex_popup">
							<uv-image src="/static/sex_0.png" width="128px" height="128px" shape="circle" @click="sexClick('女')"></uv-image>
						</view>
					</uv-col>
				</uv-row>
			</uv-popup>
			<view class="input_class" @click="sexOpen"><uv-input border="bottom" v-model="rx_info.sex" disabled disabledColor="#ffffff" placeholder="请选择"><template v-slot:prefix>
				<uv-text text="患者性别" margin="0 3px 0 0" type="tips"></uv-text></template>
			</uv-input></view>
			
			<view class="input_class"><uv-input border="bottom" v-model="rx_info.mobile" type="number" maxlength="11" placeholder="请输入"><template v-slot:prefix>
				<uv-text text="患者电话" margin="0 3px 0 0" type="tips"></uv-text></template>
			</uv-input></view>
		</view>
		<view class="form_submit_class">
			<uv-row>
				<uv-col span="6">
					<view style="width: 70%;margin-left: auto;margin-right: auto;">
						<uv-button :hairline="false" text="返回" customTextStyle="color: #2c9c3c;font-size: 28rpx" @click="backClick"></uv-button>
					</view>
				</uv-col>
				<uv-col span="6">
					<view style="width: 70%;margin-left: auto;margin-right: auto;">
						<uv-button :hairline="false" text="下一步" color="#2c9c3c" customTextStyle="color: #ffffff;font-size: 28rpx" @click="nextClick"></uv-button>
					</view>
				</uv-col>
			</uv-row>
		</view>
	</view>
</template>

<script>
	export default {
		name:"patient",
		data() {
			return {
				rx_info: {
					name: '',
					age: '',
					sex: '',
					mobile: ''
				}
			}
		},
		created() {
			this.rx_info = this.$store.state.rx		// 缓获取存数据
		},
		methods: {
			backClick() {
				uni.navigateBack()
				uni.removeStorage({ key: 'create_rx' })
			},
			nextClick() {
				this.$emit("patientNext")
				this.$store.dispatch('set_rx', this.rx_info)	// 缓存数据
			},
			sexOpen() {
				this.$refs.popup.open('bottom');
			},
			sexClick(e) {
				this.rx_info.sex = e
				this.$refs.popup.close()
			},
		}
	}
</script>

<style lang="scss">
	.form_class {
		width: 65%;
		margin-top: 15%;
		margin-left: auto; /* 左侧外边距自动调整为最大值 */
		margin-right: auto;/* 右侧外边距自动调整为最大值 */
		
		.input_class {
			margin-bottom: 20px;
		}
		
		.sex_popup {
			margin-top: 20px;
			position: relative;
			transform: translate(20%, 0px);
		}
	}
	
	.form_submit_class {
		margin-top: 20%;
		margin-left: auto; /* 左侧外边距自动调整为最大值 */
		margin-right: auto;/* 右侧外边距自动调整为最大值 */
	}
	
	.input_class_title {
		display: flex;	// 使用 flex 布局
		justify-content: space-between;	// 左右两个视图分散排列
		margin-bottom: 20px;
		
		.input_class_title {
			display: flex;	// 使用 flex 布局
			justify-content: space-between;	// 左右两个视图分散排列
			
			.input_class_title_left {
				text-align: left;
			}
			
			.input_class_title_right {
				text-align: right;
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;
			}
		}
	}
</style>
